import React, { memo } from "react";
import { useHistory } from "react-router-dom";
import { Aesatheticrightwrap } from "./style";
export default memo(function Aesatheticright(props) {
  const history = useHistory();
  const { blog } = props;
  let blog1 = [...blog.slice(0, 10)];
  blog1 = blog1.sort((a, b) => b.clickHit - a.clickHit);
  return (
    <Aesatheticrightwrap>
      <div className="top">
        <div className="title">栏目最新</div>
        <ul>
          {blog.length > 0 &&
            blog.slice(0, 10).map((item, index) => {
              return (
                <li
                  key={item.bgid}
                  onClick={(e) => {
                    history.push(`/home/aesthetic/aesathedetail/${item.bgid}`);
                  }}
                >
                  {item.title.slice(0, 15) + "..."}
                </li>
              );
            })}
        </ul>
      </div>
      <div className="bottom">
        <div className="title">最新热点</div>
        <ul>
          {blog1.length > 0 &&
            blog1.map((item, index) => {
              return (
                <li
                  key={item.bgid}
                  onClick={(e) =>
                    history.push(`/home/aesthetic/aesathedetail/${item.bgid}`)
                  }
                >
                  {item.title.slice(0, 12)}
                </li>
              );
            })}
        </ul>
      </div>
    </Aesatheticrightwrap>
  );
});
